<template>
    <div class="app-container" style="padding: 60px 60px;">
        <system-daidan v-if="true"></system-daidan>
        <div class="container" v-else>
            <div class="container-title">山寨潜伏</div>
            <el-row>
                <el-col span="12">
                    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                        <el-form-item label="推送类型">
                            <el-select v-model="pushType" placeholder="状态">
                                <el-option v-for="item in pushTypeList" :label="item" :key="item" :value="item" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户手机号" v-if="pushType == 'PERSONAL'">
                            <el-input v-model="userName" placeholder="请输入用户手机号" clearable />
                        </el-form-item>
                        <el-form-item label="标题">
                            <span>订单发货通知</span>
                        </el-form-item>
                        <el-form-item label="币种">
                            <el-input v-model="shanzhai" placeholder="CHZ/USDT" clearable />
                        </el-form-item>
                        <el-form-item label="商品名称" prop="arg1">
                            <el-input v-model="form.arg1" placeholder="分析师策略-BTC-短线做多" clearable />
                        </el-form-item>
                        <el-form-item label="发货时间" prop="arg2">
                            <el-input v-model="form.arg2" placeholder="2024-02-03 19:30" clearable />
                        </el-form-item>

                        <el-form-item label="起运地" prop="arg3">
                            <el-input v-model="form.arg3" placeholder="开仓范围：" clearable />
                        </el-form-item>
                        <el-form-item label="状态" prop="arg4">
                            <el-input v-model="form.arg4" placeholder="止盈：" clearable />
                        </el-form-item>
                        <el-form-item label="目的地" prop="arg5">
                            <el-input v-model="form.arg5" placeholder="止损:" clearable />
                        </el-form-item>
                        <el-form-item label="">
                            <!-- <el-button type="primary" @click="handleMock1">异动成功推送</el-button> -->
                            <el-button type="primary" @click="handleMock100">山寨推送</el-button>
                            <el-button type="primary" @click="showPreview = true">预览</el-button>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col span="12">
                    <div class="preview-container" v-if="showPreview">
                        <div class="preview-title">订单发货通知</div>
                        <div class="preview-item">
                            <span class="item-subtitle">商品名称:</span>
                            <span>{{ form.arg1 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">发货时间:</span>
                            <span>{{ form.arg2 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">起运地: </span>
                            <span>{{ form.arg3 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">状态: </span>
                            <span>{{ form.arg4 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">目的地:</span> 
                            <span>{{ form.arg5 }}</span>
                        </div>

                    </div>

                </el-col>
            </el-row>
            <div class="container-title">异动预警</div>
            <el-row>
                <el-col span="12">
                    <el-form ref="formY" :model="formY" :rules="rules" label-width="90px">
                        <el-form-item label="推送类型">
                            <el-select v-model="pushType" placeholder="状态">
                                <el-option v-for="item in pushTypeList" :label="item" :key="item" :value="item" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户手机号" v-if="pushType == 'PERSONAL'">
                            <el-input v-model="userName" placeholder="请输入用户手机号" clearable />
                        </el-form-item>
                        <el-form-item label="标题">
                            <span>订单发货通知</span>
                        </el-form-item>
                        <el-form-item label="token">
                            <el-input v-model="yidong" placeholder="分析师策略-BTC-短线做多" clearable />
                        </el-form-item>
                        <el-form-item label="发货时间" prop="arg2">
                            <el-input v-model="formY.arg2" placeholder="2024-02-03 19:30" clearable />
                        </el-form-item>

                        <el-form-item label="起运地" prop="arg3">
                            <el-input v-model="formY.arg3" placeholder="开仓范围：" clearable />
                        </el-form-item>
                        <el-form-item label="状态" prop="arg4">
                            <el-input v-model="formY.arg4" placeholder="止盈：" clearable />
                        </el-form-item>
                        <el-form-item label="目的地" prop="arg5">
                            <el-input v-model="formY.arg5" placeholder="止损:" clearable />
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="handleMock1">异动成功推送</el-button>
                            <el-button type="primary" @click="showPreviewY = true">预览</el-button>
                            <el-button type="primary" @click="onSubmitY">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col span="12">
                    <div class="preview-container" v-if="showPreviewY">
                        <div class="preview-title">订单发货通知</div>
                        <div class="preview-item">
                            <span class="item-subtitle">商品名称:</span>
                            <span>{{ formY.arg1 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">发货时间:</span>
                            <span>{{ formY.arg2 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">起运地: </span>
                            <span>{{ formY.arg3 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">状态: </span>
                            <span>{{ formY.arg4 }}</span>
                        </div>
                        <div class="preview-item">
                            <span class="item-subtitle">目的地:</span> 
                            <span>{{ formY.arg5 }}</span>
                        </div>

                    </div>

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { utilsMixin } from '@/mixin/utils'
import { sendSystemMsg } from '@/api/wxmsg';
import SystemDaidan from './Daidan';
export default {
    name: 'IconConfig',
    mixins: [utilsMixin],
    components: {
        SystemDaidan
    },
    data() {
        return {
            shanzhai: 'CHZ/USDT',
            yidong: 'BTC/USDT',
            showPreview: false,
            showPreviewY: false,
            pushTypeList: ['ALL', 'MEMBER', 'PERSONAL'],
            pushType: 'PERSONAL',
            form: {
                arg1: '', 
                arg2: '', // 开单时间
                arg3: '',
                arg4: '',
                arg5: '',
            },
            formY: {
                arg1: '', 
                arg2: '', // 开单时间
                arg3: '',
                arg4: '',
                arg5: '',
            },
            userName: '18232056821',
            rules: {
                arg1: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                arg2: [
                    { required: true, message: '请输入发货时间', trigger: 'blur' }
                ],
                arg3: [
                    { required: true, message: '请输入起运地', trigger: 'blur' }
                ],
                arg4: [
                    { required: true, message: '请输入目的地', trigger: 'blur' }
                ],
                arg5: [
                    { required: true, message: '请输入收件人', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        // title::ETH异动预警(暴涨/跌)v1级提前20小时预警成功，预警内最大振幅达5.13%
        this.form.arg2 = this.dateFormat('YYYY-MM-dd HH:mm:ss');
    },
    methods: {
        handleMock1() {
            // 商品名称:异动预警
            // 发货时间: 2024-02 - 17 16:00:07
            // 起运地: ETH异动预警(暴涨 / 跌)生效
            // 目的地: 异动发生概率v1(v1 < v2 < v3)
            // 收件人: 异动预警
            this.formY = Object.assign(this.formY, {
                arg1: '异动预警',
                arg2: this.dateFormat('YYYY-MM-dd HH:mm:ss'), // 开单时间
                arg3: 'ETH异动预警提前20小时预警成功',
                arg4: '异动发生概率v1最大振幅达5.13%',
                arg5: '成功预警',
            })
            this.yidong = this.formY.arg3.substring(0, 8) + '/USDT';
            
        },
        handleMock100() {
            // 商品名称:波段跟踪-BTC-30分钟周期做空
            // 发货时间: 2024-02 - 17 18: 30:09
            // 起运地:目标范围 51300.8 - 51233.7
            // 目的地:开仓范围51584.5 - 51584.5
            // 收件人:止损位 51945.6 
            this.form = Object.assign(this.form, {
                arg1: '山寨潜伏-CHZ-长线做多',
                arg2: this.dateFormat('YYYY-MM-dd HH:mm:ss'), // 开单时间
                arg3: '目标范围10-11',
                arg4: '开仓范围9-8分批建仓',
                arg5: '止损位6',
            })
        },
        onSubmitY() {
            // 异动提交
            this.$refs.formY.validate(valid => {
                if (valid) {
                    const request = {
                        pushType: this.pushType, // all member
                        pushContent: Object.keys(this.formY).map(item => this.formY[item]).join(','),
                        token: this.yidong,
                        period: 5,
                        strategyType: 'EMASMA',
                        strategyParam:  `${this.yidong},${'v1'},${this.formY.arg4.substring(13, this.formY.arg4.length - 1)}`,

                    };
                    if (request.pushType === 'PERSONAL') {
                        request.userName = this.userName;
                    }
                    sendSystemMsg(request).then(res => {
                        if (res.code === 20000) {
                            this.$message({ message: '发送成功', type: 'success' })
                            this.formY = {
                                arg1: '', // 开单时间
                                arg2: '',
                                arg3: '',
                                arg4: '',
                                arg5: '',
                            };
                        } else {
                            this.$message({ message: '发送失败', type: 'error' })
                        }
                    })
                }
            });
        },
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    console.log(Object.keys(this.form).map(item => this.form[item]))
                    const request = {
                        pushType: this.pushType, // all member
                        pushContent: Object.keys(this.form).map(item => this.form[item]).join(','),
                        token: this.shanzhai,
                        strategyType: 'SELFANALYSIS',
                    };
                    if (request.pushType === 'PERSONAL') {
                        request.userName = this.userName;
                    }
                    sendSystemMsg(request).then(res => {
                        if (res.code === 20000) {
                            this.$message({ message: '发送成功', type: 'success' })
                            this.form = {
                                arg1: '', // 开单时间
                                arg2: '',
                                arg3: '',
                                arg4: '',
                                arg5: '',
                            };
                        } else {
                            this.$message({ message: '发送失败', type: 'error' })
                        }
                    })
                }
            });
            return;

        }
    }
}
</script>

<style lang="scss" scoped>
.container-title {
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 16px;
}
.preview-container {
    margin-left: 40px;
    width: 400px;
    height: 206px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #999;
    

}
.preview-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    
}
.preview-item {
    line-height: 30px;
    color: #b2b2b2;
    font-size: 14px;
    display: flex;
    align-items: center;

}
.item-subtitle {
    width: 62px;
    margin-right: 10px;
    display: inline-block;
}
</style>
